import React from 'react';
import { Row, Col, Form, Input, Button, Spin, DatePicker, Table, Select, Popconfirm, Card, message, Upload, Icon } from 'antd';
import moment from 'moment';
import { getJsonReactNode } from '../../utils';
import { DEFAULT_PAGE_SIZE } from '../../utils/constants';
import styles from '../common_left.css';



const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    span: 14,
  },
  wrapperCol: {
    span: 10,
  },
};

@Form.create()
class XmlExcelPanel extends React.Component {
  constructor(props) {
    super(props);
    this.state = { // 状态树，存储各个控件的状态值，供外部调用
      currentRecord: {}, // 定义当前行变量，通过判断变量是否有值来决定走新增 or 修改
      modalVisible: false, // 定义是否显示新增/编辑弹窗页面
    };
  }

  // 下载用例模板
  handleDownloadExcelAtta = () => {
    const { form: { getFieldsValue } } = this.props;
    const data = {
      ...getFieldsValue(),
    };
    window.location.href = 'api/downloadExToXmlTemp/';
  };

  //上传excel并转换为xml
  handleuploadexcel = () => {
    const {  // 该组件的属性，由外部传入参数
      dispatch,
      form: { validateFields, getFieldsValue },
    } = this.props;
    const data = {
      ...getFieldsValue(),
    };
    const sheetname=data['sheetname'];
    const UploadProps = {
      name: 'casefile',
      action: `/api/excToXml/?sheetname=${sheetname}`,
      headers: {
        authorization: 'authorization-text',
      },
      onChange: (info) => {
        if (info.file.status !== 'uploading') {
          console.log('1');
        }
        if (info.file.status === 'done') {
           console.log(info.file.response)
           // 你的那个字符串文件
          var xmlStream = info.file.response
          // 创建blob对象，这个确实不一样，但是百度一下就有滴
          var xml = new Blob([xmlStream], { type: 'text/xml' });
          // 转换成浏览器本地下载链接
          var url = window.URL.createObjectURL(xml);
          // 模拟点击a标签访问上面那个链接来下载
          var a = document.createElement('a');
          a.href = url;
          // html的新特性，a标签的download属性可以设置下载文件的名称
          a.download = 'test.xml';
          a.click();

        } else if (info.file.status === 'error') {
          message.error(`${info.file.name} file upload failed.`);
        }
      },
    };
    return UploadProps;
  };

  // 将获取到的接口数据进行渲染
  render() {
    const { dispatch, loading, form: { getFieldDecorator } } = this.props;
    return (
      <div>
        {
          <div>
            <Card style={{ marginBottom: 16 }}>
              <Row gutter={12} style={{ marginBottom: 8 }}>
                <Form>
                <p><b>EXCEL转换为XML</b></p>
                </Form>
              </Row>
              <Row gutter={12} style={{ marginBottom: 8 }}>
                <Form>
                  <Col span={6}>
                    <FormItem
                      label="请输入需要转换的sheet名称"
                      {...formItemLayout}
                    >
                      {getFieldDecorator('sheetname', {
                        initialValue: '',
                        rules: [
                            {
                              required: true,
                              message: '请输入sheet',
                            },
                          ],
                      })(
                        <Input />
                      )}
                    </FormItem>
                  </Col>
                </Form>
              </Row>
              <Row gutter={12} style={{ marginBottom: 8 }}>
                <div className={styles.btnGroup}>
                  <Button type="primary" icon="download" onClick={this.handleDownloadExcelAtta}>下载模板</Button>
                  <Upload {...this.handleuploadexcel()} >
                    <Button>
                      <Icon type="upload" />上传excel并转换为xml
                    </Button>
                    <span
                      style={{
                        marginLeft: 16,
                        color: '#cccccc',
                      }}
                    >
                          仅支持.xls格式文件
                        </span>
                  </Upload>
                </div>
              </Row>
            </Card>

          </div>
        }
      </div>
    );
  }
}

export default XmlExcelPanel;
